<template>
  <div class="contentBox">
    <div class="search">
      <el-row :gutter="20" style="margin-right: 0">
        <!-- <el-col :span="3"
          ><el-select
            v-model="queryConditions.type"
            placeholder="查询条件"
            size="small"
          >
            <el-option
              v-for="item in queryConditionsOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option> </el-select
        ></el-col> -->
        <el-col :span="6">
          <el-input
            size="small "
            v-model="queryValue"
            placeholder="请输入姓名/身份证/手机号"
          ></el-input>
        </el-col>
        <el-col :span="6"
          ><el-button type="primary" size="small " @click="searchData"
            >查询</el-button
          ><el-button type="primary" size="small ">重置</el-button></el-col
        >
        <div style="float: right">
          <el-checkbox
            v-model="showToday"
            style="margin-right: 20px"
            @change="getCurrentDay"
            >只显示当天</el-checkbox
          >
          <el-checkbox
            v-model="showNoSign"
            style="margin-right: 20px"
            @change="getNotSign"
            >只显示未签到</el-checkbox
          >
        </div>
      </el-row>
    </div>
    <div class="tableBox">
      <el-table
        :data="tableData"
        height="100%"
        border
        style="width: 100%"
        stripe
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="index" width="50" align="center">
        </el-table-column>
        <el-table-column sortable prop="orderId" label="订单号" width="100">
        </el-table-column>
        <el-table-column prop="datetim" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="idcard" label="身份证"> </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <el-table-column
          prop="temperatureStatus"
          label="体温状态"
          align="center"
        >
          <template slot-scope="scoped">
            <div
              @click="handleChangeTemperature(scoped.row)"
              style="cursor: pointer"
            >
              <el-tag type="danger" v-if="scoped.row.temperatureStatus == '1'"
                >异常</el-tag
              >
              <el-tag type="success" v-else>正常</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scoped">
            <el-tag type="danger" v-if="scoped.row.status == '0'"
              >未签到</el-tag
            >
            <el-tag type="success" v-else>已签到</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scoped">
            <el-button
              :disabled="scoped.row.status == '1'"
              size="small"
              type="text"
              icon="el-icon-folder-checked"
              @click="handleSignIn(scoped.row)"
              >签到</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
       

<script>
export default {
  created() {
    this.getDataList();
  },
  data() {
    return {
      //查询条件
      queryValue: "",
      status: "",
      dateTimeFlag: "",
      queryConditions: {},
      queryConditionsOptions: [
        {
          value: "name",
          label: "按姓名查询",
        },
        {
          value: "id",
          label: "按身份证查询",
        },
        {
          value: "phone",
          label: "按手机号查询",
        },
      ],
      // 表格数据
      tableData: [
        // {
        //   idNumber: "44132419981422142",
        //   name: "王小虎",
        //   phone: "15217591536",
        //   order: "asda3d5asa3535a",
        //   signIn: true,
        //   date: new Date(2021, 3, 4),
        //   temperature: true,
        // },
        // {
        //   idNumber: "44132419981422142",
        //   name: "张晓帅",
        //   phone: "15217591536",
        //   order: "asda3d5asa3535a",
        //   signIn: true,
        //   date: new Date(2021, 3, 5),
        //   temperature: true,
        // },
        // {
        //   idNumber: "44132419981422142",
        //   name: "李小红",
        //   phone: "15217591536",
        //   order: "asda3d5asa3535a",
        //   signIn: false,
        //   date: new Date(2021, 3, 4),
        //   temperature: true,
        // },
        // {
        //   idNumber: "44132419981422142",
        //   name: "刘小明",
        //   phone: "15217591536",
        //   order: "asda3d5asa3535a",
        //   signIn: false,
        //   date: new Date(2021, 3, 5),
        //   temperature: true,
        // },
      ],
      // 只显示未签到
      showNoSign: false,
      // 只显示今天
      showToday: false,
    };
  },

  methods: {
    //查询数据
    async searchData() {
      this.getDataList();
    },
    //只显示当天的
    getCurrentDay(value) {
      if (value) {
        //选中状态
        this.dateTimeFlag = 1;
      } else {
        //非选中状态，显示全部数据
        this.dateTimeFlag = "";
      }
      this.getDataList();
    },
    //只显示未签到
    async getNotSign(value) {
      if (value) {
        //选中状态
        this.status = "0";
      } else {
        //非选中状态，显示全部数据
        this.status = "";
      }
      this.getDataList();
      //console.log(value);
    },
    //获取列表数据
    async getDataList() {
      let param = {
        queryValue: this.queryValue, //手机号码，身份号、订单编号查询
        status: this.status, //状态
        dateTimeFlag: this.dateTimeFlag,
      };
      let { data: res } = await this.$http.post(
        "banservice/guest/getguest",
        param
      );
      console.log(res.data.list);
      this.tableData = res.data.list;
    },
    async handleChangeTemperature(row) {
      //row.temperature = !row.temperature;
      //修改温度
      let param = {
        orderId: row.orderId,
        temperatureStatus: row.temperatureStatus,
        idcard: row.idcard,
        status: "",
      };
      let { data: res } = await this.$http.post("banservice/guest/sing", param);
      if (res.code == 20000) {
        this.$message.success("修改成功");
        let index = this.tableData.findIndex((fileItem) => {
          return fileItem.index === row.index;
        });
        this.tableData.splice(index, 1);
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
      this.getDataList();
    },
    async handleSignIn(row) {
      //row.signIn = true;
      //进行签到操作
      let param = {
        orderId: row.orderId,
        temperatureStatus: "",
        idcard: row.idcard,
        status: row.status,
      };
      let { data: res } = await this.$http.post("banservice/guest/sing", param);
      if (res.code == 20000) {
        this.$message.success("签到成功");
        let index = this.tableData.findIndex((fileItem) => {
          return fileItem.index === row.index;
        });
        this.tableData.splice(index, 1);
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
      this.getDataList();
    },
    tableRowClassName({ row, rowIndex }) {
      // if (
      //   (row.status == true && this.showNoSign) ||
      //   (this.getDate(row.date) < this.getDate(new Date()) && this.showToday)
      // ) {
      //   console.log(this.getDate(row.date) == this.getDate(new Date()));
      //   return "hidden";
      // }
      // return "show";
    },
    getDate(date) {
      let y = date.getFullYear();
      let m = date.getMonth() + 1 + "";
      m = m.length == 1 ? "0" + m : m;
      let d =
        (date.getDate() + "").length == 1
          ? "0" + date.getDate()
          : date.getDate();
      return y + m + d;
    },
  },
};
</script>

<style lang="less" scoped>
.contentBox {
  .search {
    padding-bottom: 20px;
  }
  .tableBox {
    height: 63vh;
  }
  /deep/ .hidden {
    display: none;
  }
}
</style>